<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">
</head>
<body>
<jsp:include page="${APP_PATH}/common/head-blog.jsp"/>
<div class="row">
    <div class="d-none d-md-block d-lg-block d-xl-block col-md-3 col-lg-3 col-xl-3 ml-2">
        <div id="defaultSideDiv">
            <div class="my-2 p-2 rounded shadow-sm bg-white">
                <div class="border-dark border-bottom pb-1">
                    <%--头像--%>
                    <div class="d-inline">
                        <img class="rounded-circle" src="${user.headimgurl}" width="48px" height="48px"
                             alt="用户头像">
                    </div>
                    <div class="d-inline">
                        <strong class="ml-2" style="vertical-align: top;">${user.nickname}</strong><br/>
                        <div style="clear: both"></div>
                    </div>
                    <span>ID:<a class="font-weight-light">${user.id}</a></span>
                </div>
                <div class="border-dark border-bottom">
                    <div class="d-flex">
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>关注</dt>
                                <dd>${user.followingusernum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>粉丝</dt>
                                <dd>${user.fannum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>经验</dt>
                                <dd>${user.jiyan}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="border-dark border-bottom">
                    <p>${user.slogan}</p>
                </div>
                <div class="pb-1">
                    <div class="d-flex my-1">
                        <div class="flex-fill text-center p-3 bg-dark"><a href="/blog-write" class="text-white">写文章</a></div>
                        <div class="flex-fill text-center p-3 bg-danger"><a href="/blog-all" class="text-white">管理文章</a></div>
                    </div>
                </div>
            </div>

            <div class="my-2 p-2 rounded shadow-sm bg-white">
                <div class="border-bottom border-dark" style="position:relative;">
                    <a class="font-weight-bold"><i class="fa fa-globe"></i> 关注领域</a>
                    <a href="/manageStarArea" class="text-muted" style="position:absolute;right:4px;">查看更多&gt;&gt;</a>
                </div>
                <div>
                    <c:forEach items="${userAreas}" var="userArea" end="5">
                        <div class="my-1">
                            <div class="text-left" style="position:relative;">
                                <img alt="图片" class="rounded-circle" src="${userArea.area.imgurl}" style="object-fit: cover"
                                     width="40px" height="40px"/>
                                <a><strong>${userArea.area.areaname}</strong></a>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>

            <div class="my-2 p-2 rounded shadow-sm bg-white">
                <div class="border-bottom border-dark" style="position:relative;">
                    <a class="font-weight-bold"><i class="fa fa-user-graduate"></i> 关注博主</a>
                    <a href="/manageStarUser" class="text-muted" style="position:absolute;right:4px;">查看更多&gt;&gt;</a>
                </div>
                <div>
                    <c:if test="${empty userFollows}">
                        <%--为空时，提示用户--%>
                        <p>您还没有关注任何人！</p>
                    </c:if>
                    <c:forEach items="${userFollows}" var="user" end="5">
                        <div class="my-1">
                            <div class="text-left" style="position:relative;">
                                <img alt="图片" class="rounded-circle" src="${user.followingUser.headimgurl}" style="object-fit: cover"
                                     width="40px" height="40px"/>
                                <a class="text-dark" style="vertical-align: sub;" href="${APP_PATH}/user/${user.followingUser.id}"><strong>${user.followingUser.nickname}</strong></a>
                            </div>
                        </div>
                    </c:forEach>
                </div>


            </div>

            <div class="my-2 p-2 rounded shadow-sm bg-white">
                <div class="border-bottom border-dark" style="position:relative;">
                    <a class="font-weight-bold"><i class="fa fa-bookmark"></i> 收藏博客</a>
                    <a href="/manageStarBlog" class="text-muted" style="position:absolute;right:4px;">查看更多&gt;&gt;</a>
                </div>
                <div>
                    <c:if test="${empty starBlogs}">
                        <%--为空时，提示用户--%>
                        <p>您还没有收藏任何博客！</p>
                    </c:if>
                    <c:forEach items="${starBlogs}" var="starBlog" end="5">
                        <c:if test="${not empty starBlog.blog}">
                            <div class="my-1">
                                <div class="text-left">
                                    <p class="mb-0">☞<a class="text-dark" href="/blog/${starBlog.blog.id}">${starBlog.blog.blogtitle}</a></p>
                                </div>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
        </div>
        <%--做锚点使用，监听页面滚动--%>
        <div id="anchor"></div>
        <div id="sideDiv" class="col-md-3 col-lg-3 col-xl-3" style="display: none;position:fixed;">
            <div class="my-2 p-2 rounded shadow-sm bg-white">
                <div class="border-dark border-bottom pb-1">
                    <%--头像--%>
                    <div class="d-inline">
                        <img class="rounded-circle" src="${user.headimgurl}" width="48px" height="48px"
                             alt="用户头像">
                    </div>
                    <div class="d-inline">
                        <strong class="ml-2" style="vertical-align: top;">${user.nickname}</strong><br/>
                        <div style="clear: both"></div>
                    </div>
                    <span>ID:<a class="font-weight-light">${user.id}</a></span>
                </div>
                <div class="border-dark border-bottom">
                    <div class="d-flex">
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>关注</dt>
                                <dd>${user.followingusernum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>粉丝</dt>
                                <dd>${user.fannum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>经验</dt>
                                <dd>${user.jiyan}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="border-dark border-bottom">
                    <p>${user.slogan}</p>
                </div>
                <div class="pb-1">
                    <div class="d-flex my-1">
                        <div class="flex-fill text-center p-3 bg-dark"><a href="/blog-write" class="text-white">写文章</a></div>
                        <div class="flex-fill text-center p-3 bg-danger"><a href="/blog-all" class="text-white">管理文章</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12">
        <div class="my-2 rounded bg-white rounded p-4" style="position: relative;">
            <h4>您当前正在学习的领域如下：</h4>
            <div style="position:absolute;top:36px;right:18px;">
                <a href="/manageStarArea" class="btn btn-sm btn-primary text-white">管理学习领域</a>
            </div>
        </div>
        <div id="areas" class="my-2 card-columns"></div>
    </div>
</div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    $(function () {
        var anchorTop = document.getElementById("anchor").offsetTop;
        $(window).scroll(function() {
            //为了保证兼容性，这里取两个值，哪个有值取哪一个
            //scrollTop就是触发滚轮事件时滚轮的高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //如果页面滑动到指定距离
            if (scrollTop > anchorTop) {
                $("#defaultSideDiv").hide();
                $("#sideDiv").show();
            }else{
                $("#sideDiv").hide();
                $("#defaultSideDiv").show();
            }
        });

        //获取所有用户关注领域
        $.ajax({
            url:'/getUserStarArea',
            type:'GET',
            success: function (result) {
                if (result.code === 100) {
                    if (result.extend.userAreas) {
                        var $areas = $("#areas");
                        $.each(result.extend.userAreas, function (index, item) {
                            if (item) {
                                var $div_card = $("<div class='card'></div>");
                                var $img = $("<img class='card-img-top' src='"+item.area.imgurl+"' alt='card cap'>");
                                var $div_body = $("<div class='card-body'></div>");
                                var $p = $("<p class='card-text'><a class='text-dark' href='/blog-area/"+item.areaid+"'>"+item.area.areaname+"</a></p>");
                                $div_card.append($img).append($div_body.append($p)).appendTo($areas);
                            }
                        });
                    }
                }else{
                    toastr.error(result.extend.error);
                }
            }
        });
    });
</script>
</body>
</html>
